<script setup lang="ts">
import { computed, ref, toRefs } from "vue";
import { formatDuration} from '@/utils/gps/format'
import moment from 'moment/moment'
import { nanoid } from "nanoid";
import { recordSelect } from "@/utils/tool";

const props = defineProps<{recordData: {stops: any[], trips: any[]}}>()
const playingRecord = ref("")

const {stops, trips} = toRefs(props.recordData)

const allData = computed(() => {
  const arr = [...stops.value, ...trips.value]
  return arr.sort((a: any, b: any)=>{
    // @ts-ignore
    return moment(a.startTime) - moment(b.startTime)
  })
})

function parentClick(event){
  if(event.target.nodeName !== "LI") return
  recordSelect(event, playingRecord)
}


</script>

<template>
  <ul style="padding-right: 10px" @click="parentClick">
    <li v-for="(item, index) in allData" :key="index" class="item" :data-key="nanoid()">
      <span class="number">{{ index + 1 }}</span>
      <img v-if="item.longitude" src="../../../../assets/gps/stop.png" class="img" alt="" />
      <img v-else src="../../../../assets/gps/route.png" class="img" alt="" />
      <span>{{ item.startTime }}</span>
      <span class="info">{{ formatDuration(item.duration / 1000) }}</span>
      <span v-if="!item.longitude" class="info">{{ Math.ceil(item.distance / 1000) + 'km' }}</span>
    </li>
  </ul>
</template>

<style scoped>
.item {
  border: 1px solid #bdbdbd;
  border-radius: 5px;
  padding: 10px;
  display: flex;
  font-size: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.info {
  flex: 1;
  margin-left: 10px;
}
.img {
  height: 18px;
  width: 18px;
  margin: 0 10px;
}
li{
  cursor: pointer;
}
li:hover{
  background-color: rgb(245, 247, 250);
}
li> *{
  pointer-events: none;
}
.on{
  background-color: rgb(204, 205, 206)!important;
}

</style>
